<template>
  <DraggableModal :visible="props.showModal" :title="`${props.title}字段`" :maskClosable="true" @ok="modalOkFn"
    @cancel="modalCancelFn">
    <Form ref="formRef" :model="state.data" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
      <a-form-item label="字段名称" name="name">
        <Input v-model:value="state.data.name" />
      </a-form-item>
      <a-form-item label="字段标识(英文字符)" name="key">
        <Input v-model:value="state.data.key" />
      </a-form-item>
      <a-form-item label="字段类型" name="valueType">
        <Select v-model:value="state.data.valueType" :options="typeList" />
      </a-form-item>
      <a-form-item label="排序权重" name="sortIndex">
        <InputNumber v-model:value="state.data.sortIndex" />
      </a-form-item>
      <a-form-item label="是否必填" name="fieldRequired">
        <a-radio-group v-model:value="state.data.fieldRequired">
          <a-radio :value="0">否</a-radio>
          <a-radio :value="1">是</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="描述" name="memo">
        <Input v-model:value="state.data.memo" />
      </a-form-item>
      <a-form-item label="枚举字段" v-if="state.data.valueType === 4">
        <Tag v-for="(item, index) in state.tagList" :key="item" closable
          style="height: 30px; line-height: 28px; margin-bottom: 5px" @close="deleteTagFn(index)">
          {{ item }}
        </Tag>
        <Popconfirm @confirm="addTagFn" @cancel="state.tagValue = ''">
          <Button type="dashed" style="height: 30px; line-height: 20px">
            <plus-outlined />添加枚举
          </Button>
          <template #title>
            <Input v-model:value="state.tagValue" style="width: 100px" placeholder="枚举内容" />
          </template>
        </Popconfirm>
      </a-form-item>
    </Form>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import {
  message,
  Form,
  InputNumber,
  Input,
  Select,
  Tag,
  Popconfirm,
} from 'ant-design-vue';
import { reactive, ref, watch } from 'vue';
import { typeMap } from '@/modules/sample_manage/pages/field-management/columns';
import { PlusOutlined } from '@ant-design/icons-vue';
import Button from '@/framework/components/basic/button/button.vue';
import { commonAdd, commonUpdate } from '@/api/common/common_data';
/**
 * const
 */
const props = withDefaults(
  defineProps<{
    showModal: boolean;
    data: any;
    title: string;
    type?: 1;
  }>(),
  {
    showModal: false,
  },
);
watch(
  () => props.showModal,
  () => {
    if (props.showModal && props.data) {
      state.data = props.data;
      state.tagList = props.data?.valueRange?.split('|') ?? [];
    }
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
  (e: 'editModalOk', params: any);
}>();
const formRef = ref();

/**
 * data
 */
const state: {
  data: any;
  tagList: string[];
  tagValue: string;
} = reactive({
  data: {},
  tagList: [],
  tagValue: '',
});
const rules = {
  name: [{ required: true, message: '该项必填！', trigger: 'change' }],
  key: [{ required: true, message: '该项必填！', trigger: 'change' }],
  valueType: [{ required: true, message: '该项必填！', trigger: 'change' }],
  sortIndex: [{ required: true, message: '该项必填！', trigger: 'change' }],
  fieldRequired: [{ required: true, message: '该项必填！', trigger: 'change' }],
  // editType: [{ required: true, message: '该项必填！', trigger: 'change' }],
  // memo: [{ required: true, message: '该项必填！', trigger: 'change' }],
  // valueRange: [{ required: true, message: '该项必填！', trigger: 'change' }],
};
const typeList = Object.values(typeMap).map((item, index) => ({
  label: item,
  value: Number(Object.keys(typeMap)[index]),
}));
/**
 * tag
 */
const deleteTagFn = (index) => {
  state.tagList.splice(index, 1);
};
const addTagFn = () => {
  state.tagList.push(state.tagValue);
  state.tagValue = '';
};

/**
 * modal
 */
const modalOkFn = async () => {
  try {
    await formRef.value?.validateFields();
  } catch {
    return;
  }
  let params: any = {
    fieldRequired: state.data.fieldRequired,
    key: state.data.key,
    memo: state.data.memo,
    name: state.data.name,
    sortIndex: state.data.sortIndex,
    valueType: state.data.valueType,
    valueRange: state.tagList.join('|'),
  };
  if (props.type === 1) {
    params.editType = 2;
  } else {
    if (props.title === '新增') {
      params.editType = 2;
      params.groupId = 'specimen_fields';
      await commonAdd(params);
    } else {
      params.id = state.data.id;
      await commonUpdate(params);
    }
  }
  message.success('操作成功！');
  emits('editModalOk', params);
  modalCancelFn();
};
const modalCancelFn = () => {
  formRef.value?.clearValidate();
  state.data = {};
  state.tagList = [];
  emits('update:showModal', false);
};
</script>

<style scoped></style>
